<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>贝塞尔</title>
    <style>
        /*不能在里面设置宽高*/
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="bt">画出贝塞尔曲线</button>
<br>
<br>

</body>

<script>

    const tipInf = (t) => {
        document.getElementById('tip').textContent = t;
    }


    const canvas = document.createElement('canvas');
    document.body.append(canvas)
    const ctx = canvas.getContext('2d');
    let width = 600;
    let height = 600;
    canvas.width = width
    canvas.height = height

    const generateGround = () => {
        let start = {x: 30, y: 30};
        //cp的x,y一旦小于end的x,y就无效了
        let cp1 = {x: 80, y: 523};
        let end = {x: 230, y: 311};
        //二阶贝塞尔曲线
        ctx.beginPath();
        ctx.moveTo(start.x, start.y);
        ctx.quadraticCurveTo(cp1.x, cp1.y, end.x, end.y);
        ctx.stroke();
        ctx.closePath();
    }
    const generateGround2 = () => {
        let start = {x: 30, y: 30};
        //cp的x,y一旦小于end的x,y就无效了
        let cp1 = {x: 80, y: 250};
        let cp2 = {x: 100, y: 40};
        let end = {x: 230, y: 43};
        //三阶贝塞尔曲线
        ctx.beginPath();
        ctx.moveTo(start.x, start.y);
        ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
        ctx.stroke();
        ctx.closePath();
    }

    const generateGround3 = () => {
        let start = {x: 100, y: 100};
        //cp的x,y一旦小于end的x,y就无效了
        let cp1 = {x: 20, y: 80};
        let cp2 = {x: 80, y: 180};
        let end = {x: 100, y: 200};
        ctx.beginPath();
        ctx.moveTo(start.x, start.y);
        ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
        ctx.fill();
        ctx.closePath();

        cp1 = {x: 180, y: 80};
        cp2 = {x: 120, y: 180};

        ctx.beginPath();
        ctx.moveTo(start.x, start.y);
        ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
        ctx.fill();
        ctx.closePath();

    }
    const generateGround4 = () => {

        ctx.beginPath();
        //arcTo
        ctx.moveTo(100, 100);
        ctx.arcTo(300, 100, 300, 300, 50);
        ctx.stroke()
        ctx.closePath();

    }
    const button = document.getElementById('bt');
    button.addEventListener('click', generateGround4);


    const deg2Arc = (deg) => {
        return (deg * Math.PI) / 180;
    }

</script>
</html>